<template>
	<view>
		<view class="head">
			<view class="top">
				<view class="arrow">
				</view>
				<view style="color: white; font-size: 48rpx;">专业洗车</view>
			</view>
			<view>
				<u--input customStyle="backgroundColor: white; width: 80vw;position: absolute;left: 8% ;top:130rpx; "
					placeholder="输入要搜索的内容" shape="circle" clearable></u--input>
				<view style="position: absolute; top: 143rpx; left: 610rpx;">
					<image src="../../static/images/lzx/搜索.png" style="width: 50rpx;height: 50rpx"></image>
				</view>
			</view>
			<view class="history">
				<view>历史记录：</view>
				<view>飞飞汽车美容</view>
				<view>飞飞汽车美容</view>
				<view>飞飞汽车美容</view>
				<view>飞飞汽车美容</view>
				<view>飞飞汽车美容</view>
				<view>飞飞汽车美容</view>
				<view>飞飞汽车美容</view>
				<view>飞飞汽车美容</view>
			</view>
			<uni-card>
				<view class="line1">
					<view>
						车百事汽车生活馆
					</view>
					<view>
						556m
					</view>
				</view>
				<view style="display: flex;margin-top: 1vh;">
					<uni-rate :readonly="true" size="20" :value="4" />
					4分 <view style="margin-left: 5vw;">销量：556</view>
				</view>
				<view class="line2">
					<view class="lineright">
						<image src="../../static/uni.png" style="height: 10vh;width: 20vw;"></image>
					</view>
					<view class="lineleft">

						<view>
							营业时间：周一到周五 早上8:00-晚上22:00
						</view>
						<view>
							位置：山阳区人民路与解放路交叉口
						</view>
					</view>
				</view>
			</uni-card>
			<uni-card>
				<view class="line1">
					<view>
						车百事汽车生活馆
					</view>
					<view>
						556m
					</view>
				</view>
				<view style="display: flex;margin-top: 1vh;">
					<uni-rate :readonly="true" size="20" :value="4" />
					4分 <view style="margin-left: 5vw;">销量：556</view>
				</view>
				<view class="line2">
					<view class="lineright">
						<image src="../../static/uni.png" style="height: 10vh;width: 20vw;"></image>
					</view>
					<view class="lineleft">

						<view>
							营业时间：周一到周五 早上8:00-晚上22:00
						</view>
						<view>
							位置：山阳区人民路与解放路交叉口
						</view>
					</view>
				</view>
			</uni-card>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.line1 {
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
	}

	.line1 :nth-child(1) {
		font-size: 3vh;
		font-weight: 600;
	}

	.line1 :nth-child(2) {
		color: #2F81FA;
	}

	.lineright {
		padding-top: 1vh;
		/* padding-left: 2vw; */
		box-sizing: border-box;
	}

	.line2 {
		display: flex;
	}

	.lineleft {
		margin-left: 2vw;
		margin-top: 1vh;
		text-align: left;
		font-size: 25rpx;
	}

	.history {
		margin-top: 10vh;
		padding: 0 3vw;
		display: flex;
		flex-wrap: wrap;
		color: white;
	}

	.history :nth-child(1) {
		font-size: 3vh;
	}

	.history :not(:nth-child(1)) {
		padding-top: 8rpx;
		/* color: aqua; */
		height: 3vh;
		margin-top: 2rpx;
		font-size: 20rpx;
		margin-left: 2vw;
	}

	.top {
		background-color: #2F81FA;
		width: 100%;
		height: 20%;
		position: fixed;
		position: relative;
		text-align: center;
		padding-top: 4%;
		box-sizing: border-box;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: absolute;
		left: 3%;
	}

	.head {
		position: relative;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>